<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="edit-button">Edit</button>
		
		<div id="popup" style="display: none;">
		  <iframe id="popup-iframe"></iframe>
		  <button id="close-popup">Close</button>
		</div>
		
		<style>
		#popup {
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0,0,0,0.8);
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
		
		#popup-iframe {
		  width: 400px;
		  height: 300px;
		  border: none;
		}
		
		#close-popup {
		  margin-top: 10px;
		}
		</style>
		
		<script>
		document.getElementById("edit-button").addEventListener("click", function() {
		  document.getElementById("popup-iframe").src = "https://www.bing.com";
		  document.getElementById("popup").style.display = "flex";
		});
		
		document.getElementById("close-popup").addEventListener("click", function() {
		  document.getElementById("popup").style.display = "none";
		});
		</script>
	</body>
</html>